<script setup>
  import { ref,onMounted } from "vue"
  let wh = ref(0)
  let bgcolor = ref('#c00000')
  let radius = ref(30)
  const emit = defineEmits(['click']);   //##表示不懂的
  
  //模拟input [事件传递:赋予组件点击事件]
   function searchBoxHandler() {
      emit('click')   //emit(eventname,dosomething)
   }

  onMounted(()=>{
    const sysInfo = uni.getSystemInfoSync()
    // 可用高度 = 屏幕高度 - navigationBar高度 - tabBar高度 - 自定义的search组件高度
    wh = sysInfo.windowHeight - 50
  })
  
  
</script>


<template>
  <view class="my-search-container" :style="`background-color:${bgcolor}`">
    <!-- 使用 view 组件模拟 input 输入框的样式 -->
    <view class="my-search-box" :style="`border-radius: ${radius}rpx`"  @click="searchBoxHandler">
      <uni-icons type="search" size="17"></uni-icons>
      <text class="placeholder">搜索</text>
    </view>
  </view>
</template>


<style lang="scss">
.my-search-container {
  height: 110rpx;
  padding: 0 16rpx;
  display: flex;
  align-items: center;
}

.my-search-box {
  height: 70rpx;
  background-color: #ffffff;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;

  .placeholder {
    font-family: "微软雅黑 Light";
    font-size: 29rpx;
    margin-left: 10rpx;
  }
}
</style>